<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>分页插件</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scal=1,user-scalable=no">
</head>
<style>
 html,body{
     height: 100%;
 }
    body {
        background: #F5F5F5;
    }
    /*上下左右居中*/
    .page{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    button,
    input {
        background: #FFFFFF;
        line-height: 40px;
        margin: 0 10px;
        text-align: center;
    }
    button{
        padding: 0 20px;
    }
    input{
        width: 70px;
    }
    
    .ul_page {
        list-style: none;
        text-align: center;
        padding: 0;
        margin: 0;
        width: 302px;
        height: 42px;
        /*固定宽高 超出部分隐藏 子绝父相 可以根据li的位移来控制 显示的li*/
        overflow-x: hidden;
        position: relative;
        
    }
    
    .ul_page li {
        position: absolute;
        width: 60px;
        line-height: 40px;
        border: 1px solid #EBEBEB;
      
    }
    ul:hover,button:hover {
        cursor: pointer;
    }    
    .hit{
        background: yellow;
    }
</style>

<body>
    <div class="page">
        <button class="index" onclick="index()">首页</button>
        <button class="up_page" onclick="up_Page()">上一页</button>
        <ul class="ul_page">
            <!--<li class="hit">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>-->
        </ul>
        <button class="down_page" onclick="down_Page()">下一页</button>
        <button class="end" onclick='end()'>尾页</button>
        <input type="text" class="content">
        <button class="go_to" onclick='go_To()'>跳转</button>
    </div>
</body>

</html>
<script>
    var arr=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
    var ul_Page=document.querySelector('.ul_page')
    var content=document.querySelector('input')
    var li;
    // 初始样式
    arr.forEach(function(item,index){
        // 创建元素
        li=document.createElement('li')
        li.innerText=item
        li.style.left=index*60+'px'
        li.onclick = function(){
       num(index+1)
       };
        if(item==3){
            li.classList.add('hit')
        }
        ul_Page.appendChild(li)
    })
    var li=document.querySelectorAll('li')
    // 移动+样式
    function num(i){
        li.forEach(function(item,index){
        if(i==1 || i==2){
            item.style.left=index*60+'px'
        }
        else if(i==li.length-1 || i==li.length){
            item.style.left=(index-li.length+5)*60+'px'
        }
       else{
            item.style.left=(index-i+3)*60+'px'
       }
        item.classList.remove('hit')
        if(index+1==i){
            item.classList.add('hit')
        }
    })
    }
    // 首页
    function index(){
        num(1)
    }
    // 上一页
    function up_Page(){
        li.forEach(function(item){
            if(item.classList.value=='hit')
            {
                
                 if(item.innerText-1>=1)
                {
                     item.classList.remove('hit')
                     num(item.innerText-1)
                }
                }
                }
                )
    }
    // 下一页
    function down_Page(){
        let page_num;
        for(var a=0;a<li.length;a++){
            if(li[a].classList.value=='hit'){
               
                page_num=(li[a].innerText)*1+1
                if(page_num<=li.length){
                     li[a].classList.remove('hit')
                     num(page_num)
                     return 
                }
                
            }
        }
    }
    // 尾页
    function end(){
        num(li.length)
    }
    // 跳转
    function go_To(){
       let page_Num=content.value
        if(page_Num>=1&&page_Num<=li.length)
        {
             num(page_Num)
        }
    }
</script>

